<template>
  <div class="mod-menu">
    <!-- 		<div>
			<el-radio-group v-model="radioTab" @change="tab">
				<el-radio-button label="1">代销中心</el-radio-button>
				<el-radio-button label="2">我的代销库</el-radio-button>
			</el-radio-group>
		</div> -->
    <el-form :inline="true" :model="params">
      <el-form-item label="商品名称">
        <el-input v-model="params.title" placeholder="输入商品名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="分组">
        <el-cascader @change="cascaderChange" :options="optionsGroup" v-model="params.group_id" :props="{ checkStrictly: true,label:'name',value:'id' }" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="是否是积分商品">
        <el-select v-model="params.point_goods" @change="selectChange('point_goods')" placeholder="是否是积分商品" clearable>
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上架状态">
        <el-select v-model="params.added" @change="selectChange('added')" placeholder="上架状态" clearable>
          <el-option label="上架" :value="1"></el-option>
          <el-option label="下架" :value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" v-loading="tableLoading" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="title" align="center" label="商品名称">
      </el-table-column>
      <el-table-column prop="title" align="center" label="分组">
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.group_slim_list" :key="index">{{item.name}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="price" align="center" label="价格">
        <template slot-scope="scope">
          <span>{{scope.row.min_sale_price==scope.row.max_sale_price?scope.row.min_sale_price:scope.row.min_sale_price+'~'+scope.row.max_sale_price}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="result_sale_num" align="center" label="实际销量">
      </el-table-column>
      <el-table-column prop="sort" align="center" label="排序">
      </el-table-column>
      <!-- 	<el-table-column prop="verify_status" align="center" label="审核状态">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.verify_status==1">通过</el-tag>
					<el-tag type="warning" v-if="scope.row.verify_status==0">待审核</el-tag>
					<el-tag type="danger" v-if="scope.row.verify_status==2">不通过</el-tag>
				</template>
			</el-table-column> -->
      <el-table-column align="center" label="上下架">
        <template slot-scope="scope">
          <el-tag :type="scope.row.added?'success':'danger'">
            {{scope.row.added?'上架':'下架'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否设置代销">
        <template slot-scope="scope">
          <el-tag effect="dark" :type="scope.row.able_proxy_sale?'success':'warning'">
            {{scope.row.able_proxy_sale?'已设置代销':'未设置代销'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" class="c-info" @click="watch(scope.row.id)">查看</el-button>
          <el-button type="text" size="small" @click="selling(scope.row)">设置代销商品</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.limit" :total="listTotal" layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-form :model="dialogParam" ref="dialogParam" label-width="100px" class="demo-ruleForm">
          <el-form-item label="是否代销商品" prop="able_proxy_sale">
            <el-radio-group v-model="dialogParam.able_proxy_sale">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="0" label="礼包商品" prop="gift_type">
            <el-radio-group v-model="dialogParam.gift_type">
              <el-radio :label="0">无礼包</el-radio>
              <el-radio :label="1">282礼包</el-radio>
              <el-radio :label="2">6750礼包</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设置组 -->
    <set-grouping v-if="setGrouping" ref="setGrouping" @result="groupResult"></set-grouping>
  </div>
</template>

<script>
import setGrouping from './set-grouping.vue'
import serviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      radioTab: '1',
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false,
      setGrouping: false, // 设置分组
      optionsGroup: [],
      params: {
        title: '',
        point_goods: null,
        added: null,
        group_id: null,
        page: 1,
        limit: 10
      },
      listTotal: null,
      viewDialogVisible: false,
      info: {},
      currId: {},
      dialogVisible: false,
      dialogTitle: '设置代销',
      dialogParam: {
        goods_id: null,
        able_proxy_sale: null,
        gift_type: null
      }
    }
  },
  components: {
    setGrouping
  },
  created () {
    this.loadGroup()
    this.loadList()
  },
  methods: {
    loadGroup () {
      serviceApi.getGoodsGroupsList().then(res => {
        console.log(res)
        if (res.data && res.data.code == 200) {
          this.optionsGroup = res.data.list
        }
      })
    },

    /**
     * 分组change
     * */
    cascaderChange () {
      if (Array.isArray(this.params.group_id)) {
        this.params.group_id = this.params.group_id[this.params.group_id.length - 1]
      }
    },

    // 代销中心列表
    loadList () {
      this.tableLoading = true
      serviceApi.getGoodsSelf(this.params).then(res => {
        if (res.data && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.listTotal = res.data.page.totalCount
        }
        this.tableLoading = false
      })
    },

    sizeChange (e) {
      this.params.page = 1
      this.params.limit = e
      this.loadList()
    },
    currentChange (e) {
      this.params.page = e
      this.loadList()
    },

    selectChange (key) {
      if (this.params[key] !== 0 && !this.params[key]) {
        this.params[key] = null
      }
    },

    search () {
      this.params.page = 1
      this.loadList()
    },
    // 设置/取消 代销
    selling (row) {
      this.dialogVisible = true
      this.dialogTitle = `设置商品[ ${row.title} ]是否代销`
      this.dialogParam.goods_id = row.id
      this.dialogParam.able_proxy_sale = row.able_proxy_sale
      this.dialogParam.gift_type = row.gift_type
    },
    // 查看
    watch (id) {
      // this.goSetGrouping(row.id);
      this.$router.push({
        path: '/send-goods',
        query: {
          id: id,
          type: 'view'
        }
      })
    },

    // 新增 / 修改
    goShareBenefit (id) {
      this.setShareBenefit = true
      this.$nextTick(() => {
        this.$refs.setGrouping.init(id)
      })
    },
    // 选择
    tab () {
      console.log(this.radioTab)
    },
    // 去设置分组
    goSetGrouping (id) {
      this.currId = id
      this.setGrouping = true
      this.$nextTick(() => {
        this.$refs.setGrouping.init(this.optionsGroup)
      })
    },
    // 分组返回值
    groupResult (e) {
      if (e) {
        let params = {
          goods_id: this.currId,
          goods_group_ids: e
        }
        serviceApi.goodsSetGroups(params).then(res => {
          if (res.data && res.data.code == 200) {
            this.$message.success('设置成功！')
            this.loadList()
          }
        })
      }
      this.setGrouping = false
    },

    /**
     * 设置代销返回值
     * */
    dialogSubmit () {
      // 代销/取消代销
      serviceApi.canSelling(this.dialogParam).then(res => {
        // debugger
        if (res.data && res.data.code == 200) {
          this.$message.success('操作成功')
          this.loadList()
          // if (!this.dialogParam.able_proxy_sale) {
          // 	//开启分组
          // 	this.goSetGrouping(this.dialogParam.goods_id);
          // }
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>
<style>
.mt30 {
  margin-top: 30px;
}
</style>
